<template>
    <div id="home">
        <el-row :guter="20" v-if="isCreated">
            <el-col :span="12" class="parent">
                <ClassAverageEchart :data="{ studentsData, tagData, classData }"></ClassAverageEchart>
            </el-col>
            <el-col :span="12" class="parent">
                <el-row :guter="20">
                    <el-col :span="24" class="item">
                        bbb
                    </el-col>
                    <el-col :span="24" class="item">
                        ccc
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>


<script setup >
import { onMounted, ref } from 'vue';
import axios from 'axios';
import ClassAverageEchart from '../../components/home/ClassAverageEchart.vue'

const studentsData = ref([])
const tagData = ref([])
const classData = ref([])
const isCreated = ref(false)
onMounted(async () => {
    // await getStudentsList()
    // await getTagList()
    // await getClassList()
    // 创建后，再执行  当有多个请求时候，但是他们没有依赖关系，可以使用Promise.all，模拟并发请求
    // 并发请求，同时执行，但是返回的结果顺序和请求顺序一致
    await Promise.all([getStudentsList(), getTagList(), getClassList()])
    isCreated.value = true
})
const getStudentsList = async () => {
    let res = await axios.get('/adminapi/students')
    studentsData.value = res.data
}
const getTagList = async () => {
    let res = await axios.get('/adminapi/tags')
    tagData.value = res.data
}
const getClassList = async () => {
    let res = await axios.get('/adminapi/classes')
    classData.value = res.data
}


</script>

<style scoped lang="scss" >
.parent {
    height: calc(100vh - 120px);

    .item {
        height: calc(50vh - 60px);
    }
}

#home {
    background: url(../../assets/bg.png) no-repeat center;
    background-size: 100% 100%;
    padding: 10px;
    color: #fff;
}
</style>